<template>
  <Main :type="'form'">
    <Title :title="title" />
    <el-steps :active="actives" simple style="margin-bottom:20px;">
      <el-step title="1. 创建活动" icon="el-icon-edit"></el-step>
      <el-step title="2. 奖项设置" icon="el-icon-edit"></el-step>
      <el-step title="3. 完成" icon="el-icon-edit"></el-step>
    </el-steps>
    <el-row v-if="actives !== 3" style="padding-bottom:70px;">
      <el-col :span="8">
        <div style=" text-align: left; font-size: 14px; margin: 11px 0;">
          手机浏览
        </div>
        <div class="moblieBoxs">
          <img src="http://oss.ztwlxx.cn/shopHTphoneheader.png" />

          <video
            ref="videosM"
            width="100%"
            height="600px"
            controls="controls"
            controlsList="nodownload"
            :poster="vposter"
            :src="vsrc"
          ></video>
        </div>
      </el-col>
      <el-col :span="16">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="150px"
          class="demos-forms"
        >
          <div v-if="actives == 1">
            <div class="add-form-title">
              <p>基本信息</p>
            </div>
            <el-form-item label="活动名称" prop="activity_name">
              <el-input
                v-model="form.activity_name"
                class="form-input"
                placeholder="请输入活动名称"
                size="medium"
              ></el-input>
            </el-form-item>

            <el-form-item label="活动时间" prop="time">
              <el-date-picker
                v-model="form.time"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:hh:ss"
                :default-time="['08:00:00', '09:00:00']"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="参与用户身份">
              <el-radio-group v-model="form.member_auth">
                <el-radio :label="0">所有用户</el-radio>
                <el-radio :label="1">会员用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动类型">
              <el-radio-group v-model="form.activity_type">
                <el-radio :label="1">无限制抽签</el-radio>
                <el-radio :label="2"
                  >积分抽奖，消耗&nbsp;&nbsp;
                  <el-input-number
                    v-model="form.activity_type_content"
                    :controls="false"
                    class="form-min-input"
                    size="medium"
                    :precision="0"
                    :min="0"
                    :disabled="form.activity_type === 1"
                  >
                  </el-input-number
                  >&nbsp;&nbsp;积分
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="参与次数" prop="">
              <el-radio-group v-model="form.partake_type">
                <el-radio :label="1">一天n次</el-radio>
                <el-radio :label="2">一人n次</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.partake_type === 1" label="" prop="">
              每人每天抽&nbsp;&nbsp;
              <el-input-number
                v-model="form.partake_type_content"
                :min="1"
                :controls="false"
                class="form-min-input"
                :precision="0"
                size="medium"
              >
              </el-input-number
              >&nbsp;&nbsp;次
            </el-form-item>
            <el-form-item v-else label="" prop="">
              一人共抽&nbsp;&nbsp;
              <el-input-number
                v-model="form.partake_type_content"
                :min="1"
                :controls="false"
                class="form-min-input"
                :precision="0"
                size="medium"
              >
              </el-input-number
              >&nbsp;&nbsp;次
            </el-form-item>

            <el-form-item label="活动说明" prop="activity_content">
              <rich-text-editor
                :text="form.activity_content"
                :widths="'80%'"
                @editorChange="editorChange"
              />
            </el-form-item>
          </div>
          <div v-if="actives == 2">
            <div class="add-form-title" style="margin-bottom: 10px;">
              <p>奖项设置</p>
              <span>最多添加六种奖品</span>
            </div>
            <div style="margin-left:90px">
              <el-button
                type="text"
                :disabled="listData.length >= 6"
                @click="addDialog"
                >添加奖品</el-button
              >
              <div
                style="margin-bottom: 22px;border:1px solid #e8e8e8;border-radius: 6px;overflow: hidden;"
              >
                <Table :data="listData">
                  <el-table-column
                    label="名称"
                    align="center"
                    property="name"
                  ></el-table-column>
                  <el-table-column
                    label="奖品"
                    align="center"
                    property="c_title"
                  ></el-table-column>
                  <el-table-column
                    label="数量"
                    align="center"
                    property="nums"
                  ></el-table-column>
                  <el-table-column label="中奖概率" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.winning_rate }}%
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="250"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="editDialog(scope.row, scope.$index)"
                      >
                        编辑
                      </el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDialog(scope.row.prize_id, scope.$index)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </Table>
              </div>
            </div>
            <div class="add-form-title">
              <p>未中奖项设置</p>
            </div>
          </div>
          <el-form-item
            v-if="actives == 2"
            label="名称"
            prop="no_win_set_names"
          >
            <el-input
              v-model="form.no_win_set_names"
              class="form-input"
              size="medium"
              placeholder="请输入未中奖名称"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="actives == 2"
            label="提示语"
            prop="no_win_set_prompt"
          >
            <el-input
              v-model="form.no_win_set_prompt"
              class="form-input"
              size="medium"
              placeholder="请输入未中奖提示语"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-else class="add-box" style="padding-bottom:70px;">
      <el-col :span="24"> </el-col>
    </el-row>
    <Footer>
      <div v-if="actives == 1">
        <el-button plain @click="$emit('out')">取 消</el-button>
        <el-button type="primary" @click="submitForm">下一步</el-button>
      </div>
      <div v-if="actives == 2">
        <el-button plain @click="actives = 1">上一步</el-button>
        <el-button type="primary" @click="submitForm">完 成</el-button>
      </div>
      <div v-if="actives == 3">
        <el-button plain @click="$emit('out')">返回列表</el-button>
        <el-button type="primary" @click="activesOutOne">继续创建</el-button>
      </div>
    </Footer>
    <el-dialog title="添加奖品" width="32%" :visible.sync="dialogFormVisible">
      <el-form ref="formDialog" :model="formDialog" :rules="rulesDialog">
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input
            v-model="formDialog.name"
            class="form-min-input"
            style="line-height: 20px;"
            placeholder="内容最多6个字"
            maxlength="6"
            show-word-limit
            size="medium"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="活动区域"
          label-width="100px"
          prop="prize_type_content"
        >
          <el-radio-group v-model="formDialog.prize_type">
            <el-radio :label="1">优惠劵</el-radio>
            <el-radio :label="2">积分</el-radio>
            <el-radio :label="3">赠品</el-radio>
          </el-radio-group>

          <div v-if="formDialog.prize_type === 1">
            <el-select
              v-model="formDialog.prize_type_content"
              class="form-min-input"
              placeholder="请选择活动区域"
              @change="changeSelect"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.title"
                :value="item.lg_coupon_id"
              ></el-option>
            </el-select>
          </div>
          <div v-if="formDialog.prize_type === 2">
            <el-input-number
              v-model="formDialog.prize_type_content"
              :min="0"
              :controls="false"
              class="form-min-input"
              size="medium"
              :precision="0"
              @change="formDialog.cTitle = formDialog.prize_type_content"
            ></el-input-number
            >&nbsp;&nbsp;积分
          </div>
          <div v-if="formDialog.prize_type === 3">
            <el-input
              v-model="formDialog.prize_type_content"
              class="form-min-input"
              style="line-height: 20px;"
              placeholder="内容最多6个字"
              maxlength="6"
              show-word-limit
              size="medium"
              @change="formDialog.cTitle = formDialog.prize_type_content"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="数量" label-width="100px" prop="nums">
          <el-input-number
            v-model="formDialog.nums"
            :min="1"
            :precision="0"
            :controls="false"
            class="form-min-input"
            size="medium"
          ></el-input-number
          >&nbsp;&nbsp;份
        </el-form-item>
        <el-form-item label="中奖概率" label-width="100px" prop="winning_rate">
          <el-input-number
            v-model="formDialog.winning_rate"
            :min="0"
            :max="100"
            :precision="2"
            :controls="false"
            class="form-min-input"
            size="medium"
          ></el-input-number
          >&nbsp;&nbsp;% &nbsp;&nbsp;&nbsp;<span class="add-info"
            >概率越高中奖几率越大</span
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPrizeTag">确 定</el-button>
      </div>
    </el-dialog>
  </Main>
</template>
<script>
import { ADD_ACTIVITY, GET_PRIZE, DEL_PRIZE } from "../service";
import { COUPON_LIST } from "@/service/shop";

export default {
  components: {
    richTextEditor: r =>
      require.ensure(
        [],
        () => r(require("publicCom/richTextEditor/richTextEditor")),
        "richTextEditor"
      )
  },
  props: {
    activityId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      title: "新建砸金蛋",
      actives: 1,
      dialogFormVisible: false,
      showImages: false,
      useType: "",
      listData: [],
      options: [],
      form: {
        activity_name: "",
        time: [],
        member_auth: 0,
        activity_content: "",
        activity_type: 1,
        activity_type_content: 0,
        partake_type: 1,
        partake_type_content: 1,
        no_win_set_names: "",
        no_win_set_prompt: ""
      },
      formDialog: {
        name: "",
        prize_type: 1,
        prize_type_content: "",
        nums: "",
        winning_rate: 0,
        cTitle: ""
      },
      lockDialog: false,
      idxDialog: -1,
      rules: {
        activity_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        time: [{ required: true, message: "请选择活动时间", trigger: "blur" }],
        activity_content: [
          { required: true, message: "请输入活动说明", trigger: "blur" }
        ],
        no_win_set_names: [
          { required: true, message: "请输入未中奖名称", trigger: "blur" }
        ],
        no_win_set_prompt: [
          { required: true, message: "请输入未中奖提示语", trigger: "blur" }
        ]
      },
      rulesDialog: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        prize_type_content: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
        nums: [{ required: true, message: "请输入数量", trigger: "blur" }],
        winning_rate: [
          { required: true, message: "请输入中奖概率", trigger: "blur" }
        ]
      },
      vposter: "",
      vsrc: "",
      dialogVisible: false,
      dataJson: {},
      exclusiveData: []
    };
  },
  watch: {
    "formDialog.prize_type"(v) {
      if (v !== 2) {
        this.formDialog.prize_type_content = "";
      } else {
        this.formDialog.prize_type_content = 0;
      }
    },
    "form.activity_type"(v) {
      if (v === 1) {
        this.formDialog.activity_type_content = 0;
      }
    }
  },
  created() {
    this.getCoupon();
    if (this.activityId) {
      this.title = "编辑砸金蛋";
      this.getPrize();
    }
  },

  methods: {
    editorChange(html) {
      this.form.activity_content = html;
    },
    addDialog() {
      this.lockDialog = false;
      this.dialogFormVisible = true;
      this.formDialog = {
        name: "",
        prize_type: 1,
        prize_type_content: "",
        cTitle: "",
        nums: 1,
        winning_rate: 1
      };
    },
    editDialog(e, i) {
      this.lockDialog = true;
      this.idxDialog = i;
      this.dialogFormVisible = true;
      this.formDialog = {
        name: e.name,
        prize_type: e.prize_type,
        prize_type_content: e.prize_type_content,
        cTitle: e.c_title,
        nums: e.nums,
        winning_rate: e.winning_rate
      };
    },
    async delDialog(prizeId, i) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DEL_PRIZE({ prize_id: prizeId }).then(({ code, msg }) => {
            if (code === 200) {
              this.listData.splice(i, 1);
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    addPrizeTag() {
      this.$refs["formDialog"].validate(valid => {
        if (valid) {
          if (this.lockDialog) {
            this.listData[this.idxDialog].name = this.formDialog.name;
            this.listData[
              this.idxDialog
            ].prize_type = this.formDialog.prize_type;
            this.listData[
              this.idxDialog
            ].prize_type_content = this.formDialog.prize_type_content;
            this.listData[this.idxDialog].c_title = this.formDialog.cTitle;
            this.listData[this.idxDialog].nums = this.formDialog.nums;
            this.listData[
              this.idxDialog
            ].winning_rate = this.formDialog.winning_rate;
          } else {
            this.listData.push(this.formDialog);
          }
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
    activesOutOne() {
      this.actives = 1;
    },
    changeSelect(e) {
      this.options.some(res => {
        if (res.lg_coupon_id === e) {
          this.formDialog.cTitle = res.title;
        }
      });
    },
    async submitForm() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.actives === 1) {
            this.actives = 2;
            return;
          }
          if (this.actives === 2) {
            if (this.listData.length < 1) {
              return this.$message.error("奖品最少一个！");
            }
            ADD_ACTIVITY({
              activity_id: this.activityId,
              activity_name: this.form.activity_name,
              begin_time: this.form.time[0],
              end_time: this.form.time[1],
              member_auth: this.form.member_auth,
              activity_content: this.form.activity_content,
              activity_type: this.form.activity_type,
              activity_type_content: this.form.activity_type_content,
              partake_type: this.form.partake_type,
              partake_type_content: this.form.partake_type_content,
              no_win_set: `${this.form.no_win_set_names},${this.form.no_win_set_prompt}`,
              prize: JSON.stringify(this.listData)
            }).then(({ code, msg }) => {
              if (code === 200) {
                if (this.activityId) {
                  this.$emit("out");
                } else {
                  this.actives = 3;
                }
              }
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
            });
          }
        } else {
          return false;
        }
      });
    },
    async getCoupon() {
      await COUPON_LIST({ page: 1, pageshow: 100000, type: 1 }).then(
        ({ code, data }) => {
          if (code === 200) {
            this.options = data.list;
          }
        }
      );
    },
    async getPrize() {
      await GET_PRIZE({ activity_id: this.activityId }).then(
        ({ code, data }) => {
          if (code === 200) {
            this.form = {
              activity_name: data.activity_name,
              time: [data.begin_time, data.end_time],
              member_auth: data.member_auth,
              activity_content: data.activity_content,
              activity_type: data.activity_type,
              activity_type_content: data.activity_type_content,
              partake_type: data.partake_type,
              partake_type_content: data.partake_type_content,
              no_win_set_names: data.no_win_set.split(",")[0],
              no_win_set_prompt: data.no_win_set.split(",")[1]
            };
            this.listData = data.prize;
            this.listData.forEach(ele => {
              if (ele.prize_type === 1) {
                this.options.some(eles => {
                  if (eles.lg_coupon_id === ele.prize_type_content) {
                    ele.c_title = eles.title;
                    return true;
                  }
                });
              } else {
                ele.c_title = ele.prize_type_content;
              }
            });
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.moblieBoxs {
  width: 378px;
  border: 1px solid #f5f5f5;
  height: 670px;
  background: #f5f5f5;
}
</style>
